<template>
<div class="Box">
    <div>
        <img :src="store.state.initUserInfo.face"/>
    </div>
    <div>
        <el-input v-model="inputVal" placeholder="与其赞同别人的话语，不如自己畅所欲言。" clearable style="width:100%;height:100%" />
    </div>
    <div>
        <el-button type="primary" style="width: 80px;;height:100%">发布</el-button>
    </div>
</div> 
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
let inputVal = ref()

</script>

<style lang="scss" scoped>
.Box{
    padding-left: 10px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 45px;
    & div:nth-child(1) {
        display: flex;
        width: 8%;
        height: 100%;
        min-width: 75px;
        position: relative;
    }
    & div:nth-child(1) img{
        position: absolute;
        left: 15px;
        //top: 15px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    & div:nth-child(2){
        width: 84%;
        height: 100%;
        margin-right: 1%;
    }
    & div:nth-child(3){
        min-width: 7%;
        min-width: 80px;
        height: 100%;
    }
}
</style>